<template>
  <div id="comments" v-scroll="appendNew">
    <header>
      <router-link :to="'/movie/'+MD.id">
        <i class="iconfont icon-jiantou-copy"></i>
      </router-link>
      <p>{{MD.nm}}</p>
    </header>
    <div class="sommentsComment">
      <p>
        <i class="iconfont icon-xinxi"></i>
        <span>短评</span>
      </p>
      <ul>
        <li v-for="items in CR.hcmts">
          <div>
            <span v-text="scores(items.score)"></span>
          </div>
          <div class="dateColor">
            <span>{{items.time}}</span>
          </div>
          <div class="shortReview">
            {{items.content}}
          </div>
          <div class="commentsAuthorPlus">
            <div>
              <img :src="items.avatarurl">
              <span>{{items.nickName}}</span>
            </div>
            <div>
              <router-link to="">
                <i class="iconfont icon-zan2"></i>
                <span>{{items.approve}}</span>
              </router-link>
              <router-link to="">
                <i class="iconfont icon-xinxi"></i>
                <span>{{items.reply}}</span>
              </router-link>
            </div>
          </div>
        </li>
      </ul>
      <ul>
        <li v-for="items in comments">
          <div>
            <span v-text="scores(items.score)"></span>
          </div>
          <div class="dateColor">
            <span>{{items.time}}</span>
          </div>
          <div class="shortReview">
            {{items.content}}
          </div>
          <div class="commentsAuthorPlus">
            <div>
              <img :src="items.avatarurl">
              <span>{{items.nickName}}</span>
            </div>
            <div>
              <router-link to="">
                <i class="iconfont icon-zan2"></i>
                <span>{{items.approve}}</span>
              </router-link>
              <router-link to="">
                <i class="iconfont icon-xinxi"></i>
                <span>{{items.reply}}</span>
              </router-link>
            </div>
          </div>
        </li>
      </ul>

    </div>
    <div class=" loading">
      加载中...
    </div>
  </div>
</template>
<script>
// import BScroll from 'better-scroll'
import filmer from '../filmer'
import $ from 'jquery'
var callBackWarpped;
export default {
  data: function() {
    return {
      MD: '',//电影详情
      CR: '',//评论
      comments: [],
      offset: 0
    }
  },
  methods: {
    init: function() {
      this.appendList();
      this.appendNew();
    },
    appendList: function() {
      var that = this;
      var id = this.$route.params.id;
      filmer.getFilmInfo(id, function(data) {
        if (data.status == 0) {
          that.MD = data.data.MovieDetailModel;
          that.CR = data.data.CommentResponseModel;
          console.log(that.MD)
          console.log(that.CR)
        }
      })
    },
    appendNew: function() {
      var that = this;
      var offset = 0;
      var limit = 10;
      var id = this.$route.params.id;
      filmer.getFilmComments(id, offset, limit, function(data) {
        // console.log(data)
        if (data.status == 0) {
          //获取更多cmts里的数据
          that.comments = that.comments.concat(data.data.CommentResponseModel.cmts);
          // toScoreArr(that.comments)
          that.offset = + limit

        }
        console.log(that.comments)
      })
    },
    scores: function(rate) {
      return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
    }
    // toScoreArr: function (data) {
    //   //把获取到的数据存储到数组里
    //   for (var i = 0; i < data.length; i++) {
    //     data[i].scoreArr = []
    //   }
    //   for (var j = 0; j < data[i].score; j++) {
    //     data[i].scoreArr.push('1')
    //   }
    // }
  },
  created: function() {
    this.init()
  },
  directives: {
    scroll: {
      bind: function(el, binding) {
        //把值绑定到bind,在窗口监听
        callBackWarpped = appendMore.bind({}, binding.value)
        window.addEventListener("scroll", callBackWarpped, false)
      },
      unbind: function(el) {
        window.removeEventListener("scroll", callBackWarpped, false)
      }
    }
  }
}
//获取窗口内部的w.h，回调
function appendMore(callback) {
  if (document.body.scrollTop + window.innerHeight >= $(document).height()) {
    callback();
  }
}
</script>
<style scoped>
#comments>header {
  width: 100%;
  background-color: #e54847;
}

#comments>header>a>i {
  position: absolute;
  top: 2.5rem;
  font-size: 2rem;
  color: #fff;
  transform: rotate(180deg);
  margin-right: 88%;
}

#comments>header>p {
  color: #fff;
}



















/* 短语 */

#comments .sommentsComment p {
  color: #fff;
  font-size: 1rem;
  padding: .2rem;
  width: 19%;
  line-height: 2rem;
  height: 2rem;
  /* width: 5rem; */
  text-align: center;
  background-color: #e54847;
  margin-bottom: 0px;
  display: inline-block;
}

#comments .sommentsComment p span {
  position: relative;
  top: -2px;
}

#comments .sommentsComment p i {
  font-size: 1.4rem;
}

#comments .sommentsComment ul li {
  padding: .5rem 0 3rem 0;
  border-bottom: 1px solid #d1d1d1;
}

#comments .sommentsComment ul li .dateColor {
  display: inline-block;
  font-size: .8rem;
}

#comments .sommentsComment ul li .shortReview {
  font-size: 1.2rem;
}

#comments .sommentsComment {
  background-color: #fff;
  padding: 1rem;
}


#comments .sommentsComment>ul>li>div:first-child {
  margin-bottom: 1rem;
  display: inline-block;
}


#comments .sommentsComment>ul>li>div:first-child>span {
  color: #ffc600;
  font-size: 1.6rem;
}



















/* 作者、更多信息 */

#comments .commentsAuthorPlus {
  margin-top: 0.5rem;
}

#comments .commentsAuthorPlus>div {
  display: inline-block;
}

#comments .commentsAuthorPlus>div:first-child {
  float: left;
}

#comments .commentsAuthorPlus>div:last-child {
  float: right;
  font-size: 1rem;
  position: relative;
  top: .5rem;
}

#comments .commentsAuthorPlus>div:last-child a>i {
  font-size: 1rem;
}

#comments .commentsAuthorPlus>div:first-child img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
}

#comments .commentsAuthorPlus>div:first-child span {
  color: #aaa;
  font-size: .8rem;
  position: relative;
  top: .2rem;
  padding-left: .5rem;
}

#comments .commentsAuthorPlus>div:last-child a {
  color: #8a8a8a;
  margin: 0.5rem;
}

#comments .loading {
  text-align: center;
  font-size: 1.6rem;
  color: tomato;
  padding: 1rem 0;
  background-color: #fff;
}
</style>
